<template>
    <el-form ref="postForm" :model="postForm" :rules="rules">
        <Sticky :class-name="'sub-navbar '+ postForm.status">
            <el-button v-if="!is_edit" @click="showGuide">显示帮助</el-button>
            <el-button
                v-loading = "loading"
                @click="submitForm"
                type="success"
                style="margin-right: 10px"
            >
                {{is_edit?'编辑电子书':'新增电子书'}}
            </el-button>
        </Sticky>
        <div class="detail-container">
            <el-row>
                <Waring />
                <el-col :span="24">
                    <!--表单控件的具体样式-->
                    <EbookUpload
                        :file-list="fileList"
                        :disabled="is_edit"
                        @onSuccess="onUploadSuccess"
                        @onRemove="onUploadRemove"
                    ></EbookUpload>
                </el-col>
                <el-col :span="24"></el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item prop="title">
                        <MdInput v-model="postForm.title" :maxlength="100">书名</MdInput>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item prop="author" label="作者:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.author"
                                placeholder="作者"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="publisher" label="出版社:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.publisher"
                                placeholder="出版社"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item prop="language" label="语言:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.language"
                                placeholder="语言"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="rootFile" label="根文件:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.rootFile"
                                placeholder="根文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item prop="filePath" label="文件路径:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.filePath"
                                placeholder="文件路径"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="unzipPath" label="解压路径:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.unzipPath"
                                placeholder="解压路径"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item prop="coverPath" label="封面路径:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.coverPath"
                                placeholder="封面路径"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="originalName" label="文件名称:" :label-width="labelWidth">
                        <el-input
                                v-model="postForm.originalName"
                                placeholder="文件名称"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item prop="cover" label="封面:" label-width="60px">
                        <a :href="postForm.cover" v-if="postForm.cover">
                            <img :src="postForm.cover" class="preview-img" alt="">
                        </a>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="目录:" label-width="60px">
                        <div v-if="contentsTree && contentsTree.length>0" class="contents-wrapper">
                            <el-tree :data="contentsTree" @node-click="onContentClick"/>
                        </div>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>
            </el-row>

        </div>
    </el-form>
</template>

<script>

    import Sticky from "../../../components/Sticky/index";
    import Waring from "./Warning"
    import EbookUpload from "../../../components/EbookUpload"
    import MdInput from '../../../components/MDinput'
    import {createBook,getBook,updateBook} from '../../../api/book'

    // const defaultForm ={
    //     title:'',
    //     author:'',
    //     publisher:'',
    //     language:'',
    //     rootFile:'',
    //     cover:'',
    //     url:'',
    //     originalName:'',
    //     contents:[],
    //     contentsTree:[],
    //     fileName:'',
    //     coverPath:'',
    //     filePath:'',
    //     unzipPath:''
    // }

    const fields = {
        title:'标题',
        author:'作者',
        language:'语言',
        publisher:'出版社'
    }
    export default {
        name: "detail",
        data(){
            const validateRequire = (rule, value, callback)=>{
                console.log(rule)
                if(value.length == 0){
                    callback(new Error(fields[rule.field]+'必须填写'))
                }else{
                    callback()
                }
            }
            return{
                loading:false,
                postForm:{
                  status:'draft'
                },
                fileList:[],
                contentsTree:[],
                labelWidth:'100px',
                rules:{
                    title:[{validator:validateRequire}],
                    author:[{validator:validateRequire}],
                    language:[{validator:validateRequire}],
                    publisher:[{validator:validateRequire}]
                }
            }
        },
        created(){
            // console.log(this.$route.params)
            const fileName = this.$route.params.fileName

            this.getBookData(fileName)
        },
        props: {
            is_edit: Boolean
        },
        components:{
            Sticky,
            Waring,
            EbookUpload,
            MdInput
        },
        methods:{
            // edit时 获取编辑图书的信息
            getBookData(fileName){
                getBook(fileName).then(response =>{
                    this.setData(response.data)
                })
            },
            submitForm(){
                if(!this.loading){
                    this.loading = true
                    this.$refs.postForm.validate((valid,fields)=>{
                        // console.log(fields)
                        if(valid){
                            const book = Object.assign({}, this.postForm)
                            // delete book.contents
                            delete book.contentsTree
                            console.log(book)
                            if(!this.is_edit){
                                createBook(book).then(response=>{
                                    const {msg}= response
                                    this.$notify({
                                        title:'操作成功',
                                        message:msg,
                                        type:'success',
                                        duration:2000
                                    })
                                    this.loading = false
                                    this.setDefault()
                                }).catch(()=>{
                                    this.loading = false
                                })
                            }else{
                                //  更新图书
                                updateBook(book).then(response =>{
                                    const {msg} = response
                                    this.$notify({
                                        title:'操作成功',
                                        message:msg,
                                        type:'success',
                                        duration:2000
                                    })
                                    this.loading = false
                                }).catch(()=>{
                                    this.loading = false
                                })
                            }
                        }else{
                            let message = (fields[(Object.keys(fields))[0]])[0].message
                            this.$message({
                                message,
                                type:'error'
                            })
                            this.loading = false
                        }
                    })
                }
            },
            showGuide(){
                console.log('显示帮助')
            },
            onContentClick(data){
                // console.log(data)
                if(data.text){
                    window.open(data.text)
                }
            },
            setDefault(){
                // this.postForm = Object.assign({},defaultForm)
                this.contentsTree = []
                this.fileList = []
                this.$refs.postForm.resetFields()
            },
            setData(data){
                const {
                    title,
                    author,
                    publisher,
                    language,
                    rootFile,
                    cover,
                    url,
                    originalName,
                    contents,
                    contentsTree,
                    fileName,
                    coverPath,
                    filePath,
                    unzipPath
                }= data

                this.postForm={
                  ...this.postForm,
                    title,
                    author,
                    publisher,
                    language,
                    rootFile,
                    cover,
                    url,
                    originalName,
                    contents,
                    fileName,
                    coverPath,
                    filePath,
                    unzipPath
                }
                this.contentsTree = contentsTree;
                this.fileList = [{name:originalName || fileName, url}]
            },
            onUploadSuccess(data){
                console.log('onUploadSuccess',data)
                this.setData(data)
            },
            onUploadRemove(){
                this.setDefault()
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .detail {
        position: relative;
    }
    .detail-container{
        padding: 40px 45px 20px 50px;
    }
    .preview-img{
        width: 200px;
        height: 270px;
    }

</style>